<template>
  <div class="dangers_container_left" style="height:100%">
    <div class="childpage-logo-title">
      <i class="iconfont icon_biaotijiantou" @click="$Ctl.backProvePage()"></i>
      <span class="page-title-text">隐患整改监管</span>
    </div>
    <div class="dangers_all">
      <span class="dangers_all_title">
        <b>实时隐患总数</b>
      </span>
      <span class="dangers_all_number">{{getHiddenDangersStatistics.totalNum-getHiddenDangersStatistics.completeNum}}</span>
      <div class="dangers_all_state">
        <ul class="dangers_all_state_ul">
          <li class="dangers_all_state_point">
            <p>待指派</p>
            <div>{{getHiddenDangersStatistics.assignNum}}</div>
          </li>
          <li class="dangers_all_state_going">
            <p>整改中</p>
            <div>{{getHiddenDangersStatistics.continueNum}}</div>
          </li>
          <li class="dangers_all_state_checked">
            <p>待核实</p>
            <div>{{getHiddenDangersStatistics.checkedNum}}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="dangers_hidden_type">
      <div class="jiantou" style="width:100%;height:8%;"></div>
      <div style="width:100%;height:67%;overflow:hidden;margin-top:10px;">
        <!-- 背景流星 -->
        <div class="stars" style="overflow: hidden;position: absolute;left: 50%;margin-left: -180px;width: 260px;height: 31%;">
          <div class="star pink"></div>
          <div class="star pink1" style="left:200px;"></div>
          <div class="star pink2" style="left:150px;"></div>
          <div class="star pink3" style="left:220px;"></div>
          <div class="star pink4" style="left:250px;"></div>
        </div>
        <!-- 背景圆动画 -->
        <div class="box yuan">
          <div class="animate wave">
            <div class="w1"></div>
            <div class="w2"></div>
            <div class="w3"></div>
            <div class="w4"></div>
          </div>
        </div>
        <div class="dangers_hidden_all_shuju">
          <template v-for="(item, index) in getHiddenDangersStatusdengji">
            <div v-if="item.gradeName == '特别重大隐患'" class="arrow" style="margin-top:-35px;" :key="index">
              <div class="yuan_shuju yuan_shuju_animation1">{{item.count}}</div>
              <div class="shuli">特大隐患</div>
            </div>
            <div v-if="item.gradeName == '重大隐患'" class="arrow1" :key="index" style="margin-left:75px;margin-top:0;margin-top:-10px;">
              <div class="yuan_shuju yuan_shuju_animation2" style="color:#FFA414">{{item.count}}</div>
              <div class="shuli" style="color:#FFA414;border-right:2px solid #FFA414;">{{item.gradeName}}</div>
            </div>
            <div class="arrow2" v-if="item.gradeName == '较大隐患'" :key="index" style="margin-left:150px;margin-top:-20px;">
              <div class="yuan_shuju yuan_shuju_animation3" style="color:#DAD867">{{item.count}}</div>
              <div class="shuli" style="color:#DAD867;border-right:2px solid #DAD867;">{{item.gradeName}}</div>
            </div>
            <div class="arrow3" v-if="item.gradeName == '一般隐患'" :key="index" style="margin-left:225px;margin-top:-30px;">
              <div class="yuan_shuju yuan_shuju_animation4" style="color:#1E7FEE">{{item.count}}</div>
              <div class="shuli" style="color:#1E7FEE;border-right:2px solid #1E7FEE;">{{item.gradeName}}</div>
            </div>
          </template>
        </div>
      </div>
      <div style="margin-top:10px;">
        <ul class="dangers_hidden_type_ul">
          <li v-for="(item, index) in getHiddenDangersStatus" :key="index">
            <div
              :class="[{'dangers_hidden_type_ul_div1': item.categoryId == 1},{'dangers_hidden_type_ul_div2': item.categoryId == 2},{'dangers_hidden_type_ul_div3': item.categoryId == 3},{'dangers_hidden_type_ul_div4': item.categoryId == 4},{'dangers_hidden_type_ul_div5': item.categoryId == 5},,{'dangers_hidden_type_ul_div6': item.categoryId == 6}]"
            >
              <p class="dangers_hidden_type_first_p">{{item.categoryName}}</p>
              <p
                class="dangers_hidden_type_last_p"
                :class="[{'dangers_hidden_type_last_p1': item.categoryId == 2},{'dangers_hidden_type_last_p2': item.categoryId == 3},{'dangers_hidden_type_last_p3': item.categoryId == 4},{'dangers_hidden_type_last_p4': item.categoryId == 5},{'dangers_hidden_type_last_p5': item.categoryId == 6},]"
              >{{item.count}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="dangers_hidden_bottom">
      <p class="dangers_hidden_bottom_title">实时隐患枚举</p>
      <div class="unit-list-wrap" style="border:none;margin-top:0;">
        <ul class="dangers_hidden_bottom_ul unit-list" v-infinite-scroll="getHiddenDangerListPic" :infinite-scroll-disabled="isOver">
          <li v-for="(item, index) in getHiddenDangersListPic" :key="index" @click="item.info3d && fixedHidden(item)">
            <img v-if="item.info3d" class="item_adress" src="../../../assets/images/homeLeft/fix.png" alt />
            <el-image fit="cover" :src="(item.hiddenDetail && item.hiddenDetail.picUrls)?(item.hiddenDetail.picUrl):''">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getHiddenManagerStatistics,
  getHiddenGradeNumByStatus,
  getHiddenDangerList,
  getHiddenDangerListForScreen,
} from '@/api/dangers'
export default {
  name: 'RectificationDangers',
  data() {
    return {
      getHiddenDangersStatistics: {
        totalNum: 0,
        completeNum: 0,
      }, //隐患情况总览
      getHiddenDangersStatus: {}, //获取隐患指定状态数量
      getHiddenDangersStatusdengji: {},
      orgIds: '',
      getHiddenDangersListPic: [], // 实时隐患枚举列表
      pageSize: 20,
      pageIndex: -1,
      isOver: false,
      videoImg: require('../../../assets/images/videoImgDetail/video_img_detail.png'),
    }
  },
  props: {
    parames: {
      required: true,
    },
  },
  created() {
    this.orgIds = this.parames.orgIds
  },
  mounted() {
    this.getHiddenManagerStatistics()
    this.getHiddenGradeNumByStatus()
  },
  activated() {
    this.$Ctl.refreshMapMarkerDataToFmap()
  },
  methods: {
    getHiddenManagerStatistics() {
      getHiddenManagerStatistics({ orgIds: this.orgIds }).then((res) => {
        if (res.status == 200) {
          this.getHiddenDangersStatistics = res.data
        }
      })
    },
    getHiddenGradeNumByStatus() {
      let that = this
      //类型
      let parames = {
        orgIds: that.orgIds,
        type: 1,
        status: 4,
      }
      getHiddenGradeNumByStatus(parames).then((res) => {
        if (res.status == 200) {
          that.getHiddenDangersStatus = res.data
        }
      })
      //等级
      let parames1 = {
        orgIds: that.orgIds,
        type: 2,
        status: 4,
      }
      getHiddenGradeNumByStatus(parames1).then((res) => {
        if (res.status == 200) {
          that.getHiddenDangersStatusdengji = res.data
        }
      })
    },
    getHiddenDangerListPic(pageIndex) {
      let that = this
      that.$Ctl.loading(1, 10000)
      if (typeof pageIndex != 'undefined') {
        that.pageIndex = pageIndex
      } else {
        that.pageIndex += 1
      }
      let mapType = localStorage.getItem('ilinkBs_currentMapType')
      let param = {
        orgIds: that.orgIds,
        mapType: mapType == 4 ? 2 : mapType,
        types: 32,
        queryType: 1,
        pageIndex: that.pageIndex,
        pageSize: that.pageSize,
      }
      getHiddenDangerListForScreen(param).then((res) => {
        if (typeof pageIndex != 'undefined' && that.pageIndex === 0) {
          that.isOver = false
          // 重新查询
          that.getHiddenDangersListPic = res.data
        } else {
          that.getHiddenDangersListPic.push.apply(
            that.getHiddenDangersListPic,
            res.data
          )
        }
        for (let i = 0; i < that.getHiddenDangersListPic.length; i++) {
          if (
            that.getHiddenDangersListPic[i].hiddenDetail.picUrls
              .split(',')[0]
              .substring(
                that.getHiddenDangersListPic[i].hiddenDetail.picUrls.split(
                  ','
                )[0].length - 4
              ) == '.mp4' ||
            that.getHiddenDangersListPic[i].hiddenDetail.picUrls
              .split(',')[0]
              .substring(
                that.getHiddenDangersListPic[i].hiddenDetail.picUrls.split(
                  ','
                )[0].length - 4
              ) == '.3gp' ||
            that.getHiddenDangersListPic[i].hiddenDetail.picUrls
              .split(',')[0]
              .substring(
                that.getHiddenDangersListPic[i].hiddenDetail.picUrls.split(
                  ','
                )[0].length - 5
              ) == '.mpeg' ||
            that.getHiddenDangersListPic[i].hiddenDetail.picUrls
              .split(',')[0]
              .substring(
                that.getHiddenDangersListPic[i].hiddenDetail.picUrls.split(
                  ','
                )[0].length - 7
              ) == '.mavip4' ||
            that.getHiddenDangersListPic[i].hiddenDetail.picUrls
              .split(',')[0]
              .substring(
                that.getHiddenDangersListPic[i].hiddenDetail.picUrls.split(
                  ','
                )[0].length - 4
              ) == '.flv' ||
            that.getHiddenDangersListPic[i].hiddenDetail.picUrls
              .split(',')[0]
              .substring(
                that.getHiddenDangersListPic[i].hiddenDetail.picUrls.split(
                  ','
                )[0].length - 4
              ) == '.mov'
          ) {
            // that.$set(that.getHiddenDangersListPic[i].hiddenDetail,"picUrl",that.videoImg)
            that.getHiddenDangersListPic[i].hiddenDetail.picUrl = that.videoImg
            // that.getHiddenDangersListPic[i].hiddenDetail.picUrls = require('../../../assets/images/videoImgDetail/video_img_detail.png')
          } else {
            // that.getHiddenDangersListPic[i].hiddenDetail.picUrls
            that.$set(
              that.getHiddenDangersListPic[i].hiddenDetail,
              'picUrl',
              that.getHiddenDangersListPic[i].hiddenDetail.picUrls.split(',')[0]
            )
          }
        }
        // 最后一页停止滚动加载
        if (res.data.length < that.pageSize) {
          that.isOver = true
        } else {
          that.isOver = false
        }
        that.$Ctl.loading(0)
      })
    },
    //定位
    fixedHidden(item) {
      let indoorId = ''
      if (item.info3d) {
        indoorId = (JSON.parse(item.info3d)[0] || {}).indoorId
      }
      this.$Ctl.fixedPosition({
        info3d: item.info3d,
        id: item.hiddenDetail.id,
        indoorMapId: item.indoorMapId || '',
        indoorId,
        bizId: item.hiddenDetail.id,
        type: 32,
        name: item.name,
        hiddenDetail: item.hiddenDetail,
        orgId: item.hiddenDetail.orgId,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.dangers_container_left {
  .dangers_header_title {
    height: 80px;
    font-size: 2rem;
    color: #4699ff;
    span {
      span {
        color: #63bdf1;
      }
    }
    .icon_biaotijiantou {
      color: #7fc0f7;
      font-size: 2rem;
    }
  }
  .dangers_all {
    height: 17%;
    .dangers_all_title {
      color: #4699ff;
      font-size: 24px;
    }
    .dangers_all_number {
      color: #4699ff;
      font-size: 24px;
      margin-left: 143px;
      font-family: 'DigitaldreamFat';
    }
    .dangers_all_state_ul {
      display: flex;
      justify-content: space-between;
      li {
        width: 98px;
        margin-top: 31px;
        float: left;
        margin-left: 25px;
        list-style: none;
        p {
          font-size: 18px;
          text-align: center;
        }
        div {
          width: 98px;
          height: 40px;
          font-size: 20px;
          border-radius: 3px;
          text-align: center;
          line-height: 40px;
          font-family: 'DigitaldreamFat';
          margin-top: 7px;
        }
      }
      .dangers_all_state_point {
        p {
          color: #39b2ff;
        }
        div {
          color: #39b2ff;
          border: 1px solid #00b4ff;
          background: rgba(57, 178, 255, 0.2);
        }
      }
      .dangers_all_state_going {
        p {
          color: #e29c4b;
        }
        div {
          color: #e29c4b;
          border: 1px solid #e29c4b;
          background: rgba(226, 156, 75, 0.2);
        }
      }
      .dangers_all_state_checked {
        p {
          color: #0cbeb4;
        }
        div {
          color: #0cbeb4;
          border: 1px solid #0cbeb4;
          background: rgba(12, 190, 180, 0.2);
        }
      }
    }
  }
  .dangers_hidden_type {
    height: 49%;
    .jiantou {
      background: url(../../../assets/images/detailPage/dangers_jiantou.gif)
        center no-repeat;
    }
    .dangers_hidden_type_ul {
      li {
        float: left;
        list-style: none;
        margin-left: 15px;
        margin-top: 13px;
        div {
          width: 110px;
          height: 54px;
          //background-color: #21333C;
          background-color: rgba(6, 23, 35, 0.4);
          .dangers_hidden_type_first_p {
            font-size: 17px;
            color: #a6aaac;
            margin-top: 4px;
            margin-left: 14px;
          }
          .dangers_hidden_type_last_p {
            font-size: 24px;
            color: #2cb58d;
            margin-left: 14px;
          }
          .dangers_hidden_type_last_p1 {
            color: #e78b3c;
          }
          .dangers_hidden_type_last_p2 {
            color: #e95299;
          }
          .dangers_hidden_type_last_p3 {
            color: #5388f4;
          }
          .dangers_hidden_type_last_p4 {
            color: #75c0f6;
          }
          .dangers_hidden_type_last_p5 {
            color: #d9ba4f;
          }
        }
        .dangers_hidden_type_ul_div1 {
          border-left: 2px solid #2cb58d;
        }
        .dangers_hidden_type_ul_div2 {
          border-left: 2px solid #e78b3c;
        }
        .dangers_hidden_type_ul_div3 {
          border-left: 2px solid #e95299;
        }
        .dangers_hidden_type_ul_div4 {
          border-left: 2px solid #5388f4;
        }
        .dangers_hidden_type_ul_div5 {
          border-left: 2px solid #75c0f6;
        }
        .dangers_hidden_type_ul_div6 {
          border-left: 2px solid #d9ba4f;
        }
      }
    }
  }
  .dangers_hidden_bottom {
    height: 38%;
    margin-top: 50px;
    .dangers_hidden_bottom_title {
      display: inline-block;
      font-size: 24px;
      font-weight: bold;
      color: #4699ff;
    }
    .dangers_hidden_bottom_ul {
      width: 100%;
      height: 100%;
      overflow: auto;
      li {
        cursor: pointer;
        position: relative;
        width: 20%;
        min-width: 100px;
        height: 90px;
        float: left;
        list-style: none;
        margin: 4px 1%;
        .el-image {
          width: 100%;
          height: 100%;
        }
        .item_adress {
          position: absolute;
          top: 5px;
          right: 5px;
          z-index: 1;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
<style type="scss" scoped>
@keyframes opac {
  from {
    opacity: 1;
    width: 0;
    height: 0;
    top: 25%;
    left: 50%;
  }
  to {
    opacity: 0;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
  }
}
.wave:before {
  position: absolute;
  bottom: 80%;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 0px;
  height: 130px;
  border-radius: 0 0 40% 40%;
  box-shadow: 0 0px 50px 75px rgba(26, 110, 255, 0.4);
}
.animate .w1 {
  border: 2px solid rgba(16, 128, 255, 0.6);
  box-shadow: 0px -5px 10px rgba(16, 128, 255, 1) inset;
  -webkit-animation-delay: 0s;
}
.animate .w2 {
  border: 2px solid rgba(16, 128, 255, 0.6);
  box-shadow: 0px -5px 10px rgba(16, 128, 255, 1) inset;
  -webkit-animation-delay: 1s;
}
.animate .w3 {
  border: 2px solid rgba(16, 128, 255, 0.6);
  box-shadow: 0px -5px 10px rgba(16, 128, 255, 1) inset;
  -webkit-animation-delay: 2s;
}
.animate .w4 {
  border: 2px solid rgba(16, 128, 255, 0.6);
  box-shadow: 0px -5px 10px rgba(16, 128, 255, 1) inset;
  -webkit-animation-delay: 3s;
}
.wave {
  width: 22.7rem;
  height: 22.7rem;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.wave * {
  border: 1px solid #fff;
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: opac 4s infinite;
}
.arrow {
  width: 60px;
  height: 200px;
  position: absolute;
}
/*nimation-delay:1s*/
@keyframes arrow1 {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-60px);
  }
}
@keyframes arrow2 {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-60px);
  }
}
@keyframes yuan_shuju_animation1 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
@keyframes yuan_shuju_animation2 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
@keyframes yuan_shuju_animation3 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
@keyframes yuan_shuju_animation4 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
/* @keyframes shuli{
        0%{transform: scaleY(1);}
        25%{transform: scaleY(1);}
        75%{transform: scaleY(1);}
        100%{transform: scaleY(1.5);
        transform-origin:  100% 100%;
         }

    } */
.arrow {
  animation: arrow1 4s infinite;
  animation-direction: alternate;
}
.shuli {
  margin: 0 auto;
  width: 25px;
  height: 150px;
  line-height: 24px;
  color: #ed3368;
  border-right: 2px solid #ed3368;
  font-size: 22px;
  animation: shuli 4s infinite;
  animation-direction: alternate;
  -webkit-animation-delay: 0s;
}
.yuan_shuju {
  margin-left: 25px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-family: 'DigitaldreamFat';
  color: #ed3368;
}
.yuan_shuju_animation1 {
  animation: yuan_shuju_animation1 4s infinite;
  animation-direction: alternate;
  -webkit-animation-delay: 0s;
}
.yuan_shuju_animation2 {
  animation: yuan_shuju_animation2 4s infinite;
  animation-direction: alternate;
  -webkit-animation-delay: 2s;
}
.yuan_shuju_animation3 {
  animation: yuan_shuju_animation3 4s infinite;
  animation-direction: alternate;
  -webkit-animation-delay: 4s;
}
.yuan_shuju_animation4 {
  animation: yuan_shuju_animation4 4s infinite;
  animation-direction: alternate;
  -webkit-animation-delay: 6s;
}
.dangers_hidden_all_shuju {
  position: absolute;
  left: 50%;
  margin-left: -142.5px;
  margin-top: 21%;
  width: 285px;
  height: 22.7rem;
}
.arrow1 {
  width: 60px;
  height: 200px;
  position: absolute;
  animation: arrow2 4s infinite;
  animation-direction: alternate;
  -webkit-animation-delay: 2s;
}
.arrow2 {
  width: 60px;
  height: 200px;
  position: absolute;
  animation: arrow2 4s infinite;
  animation-direction: alternate;
  -webkit-animation-delay: 4s;
}
.arrow3 {
  width: 60px;
  height: 200px;
  position: absolute;
  animation: arrow2 4s infinite;
  animation-direction: alternate;
  -webkit-animation-delay: 6s;
}
/* 流星特效 */
.star {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  top: 100px;
  left: 100px;
  position: relative;
  transform-origin: 100% 0;
  animation: star-ani 4s infinite ease-out;
  box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
  opacity: 0;
  z-index: 2;
}
.star:after {
  content: '';
  display: block;
  top: 0px;
  left: 4px;
  border: 0px solid #fff;
  border-width: 0px 90px 2px 90px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
  transform: rotate(90deg) translate3d(1px, -1.5px, 0);
  box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
  transform-origin: 0% 100%;
  animation: shooting-ani 3s infinite ease-out;
}
.pink {
  top: 300px;
  background: #0084ff;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5;
}
.pink:after {
  border-color: transparent transparent transparent #0084ff;
  animation-delay: 0.5;
  -webkit-animation-delay: 0.5;
  -moz-animation-delay: 0.5;
}
.pink1 {
  top: 300px;
  background: #0084ff;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
}
.pink1:after {
  border-color: transparent transparent transparent #0084ff;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
}
.pink2 {
  top: 300px;
  background: #0084ff;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
}
.pink2:after {
  border-color: transparent transparent transparent #0084ff;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
}
.pink3 {
  top: 300px;
  background: #0084ff;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}
.pink3:after {
  border-color: transparent transparent transparent #0084ff;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}
.pink4 {
  top: 300px;
  background: #0084ff;
  animation-delay: 2.2s;
  -webkit-animation-delay: 2.2s;
  -moz-animation-delay: 2.2s;
}
.pink4:after {
  border-color: transparent transparent transparent #0084ff;
  animation-delay: 2.2s;
  -webkit-animation-delay: 2.2s;
  -moz-animation-delay: 2.2s;
}
@keyframes star-ani {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 2000px, 0);
    -webkit-transform: scale(0) rotate(0) translate3d(0, 2000px, 0);
    -moz-transform: scale(0) rotate(0) translate3d(0, 2000px, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0) translate3d(0px, 0px, 0);
    -webkit-transform: scale(1) rotate(0) translate3d(0px, 0px, 0);
    -moz-transform: scale(1) rotate(0) translate3d(0px, 0px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(0px, -300px, 0);
    -webkit-transform: scale(1) rotate(0) translate3d(0px, -300px, 0);
    -moz-transform: scale(1) rotate(0) translate3d(0px, -300px, 0);
  }
}
</style>